<template>
	<view class="gift">
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<view class="topBox">
				<!-- <view class="head1">
					<view class="searchBox">
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721975652195245.png" mode="">
						</image>
						<input type="text" v-model="searchValue" @input="searchCustomers" placeholder="请输入搜索内容"/>
					</view>
				</view> -->
				<view class="topList">
					<block v-for="(item, index) in tabList" :key="index">
						<view class="topCell" :class="index == nowIndex ? 'topCellIng' : ''"
							@click="chooseTab(index)">
							{{ item.label }}
							<view class="unReadNum" v-if="item.count">{{ item.count }}</view>
						</view>
					</block>
				</view>
			</view>
			<view style="height: 88rpx;"></view>

			<block v-if="orderList.length > 0">
				<view class="cellList">
					<block v-if="nowIndex == 0">
						<view class="itemCell" v-for="(item, index) in orderList" :key="index">
							<view class="single">
								<view class="border" @click="goDetail(item.ProductID)">
									<view class="single_img">
										<image :src="item.Images.split(',')[0]" mode="aspectFill"></image>
									</view>
									<view class="single_right">
										<view class="single_title">
											<view class="single_title_text">
												{{ item.ProductName || '--' }}
											</view>
										</view>
										<view class="single_bottom">
											<view class="single_price">
												<view class="dollor">￥</view>
												{{ item.Price || '--' }}
											</view>
											<view class="user_send">
												<view class="col_btn" @click.stop="del_col(item.ProductID, index)">取消收藏
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>
					</block>
					<block v-else>
						<view class="heatbox" v-for="(el, i) in orderList" :key="i">
							<view class="heattextbox" @click="nav_to('/pages/store/farm_detail?id=' + el.ID)">
								<view class="heat_til">{{ el.PlaceName }}</view>
								<!-- <image class="heat_img"
                                src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732534745240412.png"></image> -->
								<view class="heat_more"> {{ el.Province }} · {{ el.City }} {{ el.Area ? ` · ${el.Area}` : ''
									}}</view>
							</view>
							<view class="headImgBox" @click="nav_to('/pages/store/farm_detail?id=' + el.ID)">
								<image :src="el.Banner" mode="widthFix" />
							</view>
							<view class="heat_shop_box">
								
							</view>
						</view>
					</block>

				</view>

			</block>
			<block v-else>
				<EmptyBox></EmptyBox>
			</block>
		</block>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			load: false,
			orderList: [],
			nowIndex: 0,
			tabList: [
				{
					label: '商品',
					value: '1',
					listFn:'MyCollect'
				},
				{
					label: '新农人',
					value: '2',
					listFn:'myFarmerList'
				},
			],
		};
	},
	onLoad() {
		this.chooseTab(0)
	},
	methods: {
		chooseTab(e) {
			this.nowIndex = e
			const fn = this.tabList[e].listFn
			this[fn]()
		},
		// 点击跳转详情
		goDetail(id) {
			this.nav_to(`/pages/shop/detail?id=${id}`)
		},
		async MyCollect() {
			let res = await this.$api.post('Products/MyCollect')
			if (res.code == 0) {
				this.orderList = res.data
				this.load = true
			}
		},
		async myFarmerList(){
			let res = await this.$api.post('Place/MyFocusList',{PlaceType:'新农人'})
			if (res.code == 0) {
				this.orderList = res.data
				this.load = true
			}
		},
		async del_col(id, index) {
			let _this = this
			uni.showModal({
				title: '温馨提示',
				content: '您要取消这就商品的收藏吗?',
				confirmText: "确定",
				success: async function (res) {
					if (res.confirm) {
						let res1 = await _this.$api.post('Products/DeleteCollect', {
							ID: id
						});
						if (res1.code == 0) {
							_this.orderList.splice(index, 1)
							_this.$pv.msg('取消成功');

						}
					} else if (res.cancel) {
					}
				}
			});
		}
	},

}
</script>
<style lang='scss'>
page {
	// height: 100%;
	background: #f6f6f6;
}

.gift {

	// padding-top: 100rpx;
	.cellList {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0 80rpx;
	}

	.itemCell {
		// margin: 30rpx 0;

		.single {
			width: 700rpx;
			// height: 252rpx;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;

			.time {
				color: #999;
				font-size: 26rpx;
				padding-bottom: 20rpx;
			}

			.border {
				display: flex;
				align-items: center;
				// border-bottom: 1rpx solid #E4E4E4;
				padding: 20rpx 0;

				.single_img {
					width: 204rpx;
					height: 204rpx;
					margin-right: 10rpx;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.single_right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					margin-left: 10rpx;
					/* margin: 0 5rpx 0 10rpx; */
					min-height: 200rpx;

					.single_title {
						width: 100%;
						display: flex;
						// align-items: center;
						justify-content: space-between;

						.single_title_text {
							width: 340rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							display: -webkit-box;
							/*弹性伸缩盒子模型显示*/
							-webkit-box-orient: vertical;
							/*排列方式*/
							-webkit-line-clamp: 2;
							/*显示文本行数(这里控制多少行隐藏)*/
							overflow: hidden;
							/*溢出隐藏*/
						}

						.single_title_state {
							// flex: 1;
							font-weight: 500;
							font-size: 28rpx;
							color: #ff6030;
						}
					}

					.single_tabs {
						display: flex;
						margin: 10rpx 0 10rpx -5rpx;

						.single_tab {
							width: 104rpx;
							height: 36rpx;
							border-radius: 8rpx;
							border: 1rpx solid #f91c1c;
							font-size: 20rpx;
							color: #f91c1c;
							margin: 0 5rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.single_spec {
						font-size: 26rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 24rpx;

						.single_style {
							font-weight: 500;
							font-size: 24rpx;
							// color: #999999;
							color: #ff6030;
						}
					}

					.single_bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-wrap: wrap;

						.single_price {
							font-weight: bold;
							font-size: 42rpx;
							color: #333333;
							display: flex;
							align-items: baseline;

							.dollor {
								font-weight: bold;
								font-size: 24rpx;
								color: #333333;
							}
						}

						.user_send {
							display: flex;
							align-items: center;

							.col_btn {
								width: 172rpx;
								height: 72rpx;
								background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
								border-radius: 36rpx;
								font-size: 28rpx;
								color: #fff;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.head {
								width: 40rpx;
								height: 40rpx;
								margin-right: 8rpx;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.name {
								font-size: 28rpx;
								color: #999999;
							}
						}
					}
				}
			}

			.border:last-child {
				border-bottom: none;
			}
		}
	}

	.heatbox {
		width: 702rpx;
		// height: 402rpx;
		margin: 20rpx auto;
		background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17325278470281311.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-radius: 30rpx;

		.heattextbox {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 26rpx 22rpx;
			padding-bottom: 0;
			box-sizing: border-box;

			.heat_til {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 8rpx;
			}

			.heat_img {
				width: 38rpx;
				height: 38rpx;
			}

			.heat_more {
				// width: 128rpx;
				height: 44rpx;
				// background: linear-gradient(90deg, rgba(250, 113, 52, 0.05) 0%, rgba(253, 151, 74, 0.21) 100%);
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #FF6030;
				margin-left: auto;
			}
		}

		.headImgBox {
			width: 100%;
			padding: 12rpx;

			image {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 12rpx;
			}
		}

		.heat_shop_box {
			overflow-x: auto;
			width: 100%;
			padding: 0 22rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			margin-top: 10rpx;

		}
	}
}

.topBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #ffffff;

	.head1 {
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: fixed;
		// top: 0;
		// left: 0;
		box-shadow: 0 0 8rpx #ccc;

		.searchBox {
			width: 93%;
			height: 72rpx;
			background: #F6F6F6;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			color: #666666;

			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 10rpx 0 20rpx;
			}

			input {
				width: 80%;
			}
		}
	}

	.topList {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.topCell {
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			position: relative;
		}

		.topCellIng {
			position: relative;
			color: #ff6030;

			&::before {
				position: absolute;
				content: '';
				left: 0;
				bottom: -18rpx;
				width: 100%;
				height: 6rpx;
				background: #ff6030;
				border-radius: 5rpx;
			}
		}

		.unReadNum {
			max-width: 48rpx;
			min-width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: -30rpx;
			top: -10rpx;
			font-size: 22rpx;
			background-color: #FC201C;
			color: white;
			padding: 5rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>